<template>
  <div class="app-container">
    <el-tabs
      v-model="roomType"
      type="card"
      editable
      @tab-add="checkCard"
    >
      <template #addIcon>
        <el-button type="primary" plain>查  卡</el-button>
      </template>
      <el-tab-pane label="整套" name="package">
        <Package />
      </el-tab-pane>
      <el-tab-pane label="合租" name="shared">shared</el-tab-pane>
      <el-tab-pane label="整栋" name="building">
        <Building />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="Room">
import Package from './package.vue'
import Building from './building.vue'

const roomType = ref('package')

function checkCard() {
  console.log('查看...');
}
</script>
<style lang="scss" scoped>
:deep(.el-tabs) {
  .is-icon-close {
    display: none !important;
  }
  .el-tabs__item {
    padding: 0 20px!important;
  }
  .el-tabs__new-tab {
    width: 64px;
  }
}
</style>